<template>
    <div class="player container">
      <div class="toolbar">
        <el-row class="row">
          <el-col :span="4">
            <!--<p>currentFrame:<span>{{currentFrame}}</span></p>-->
            <!--<p>totalFrame:<span>{{totalFrame}}</span></p>-->
            <!--<p>currentFrame/totalFrame:<span>{{currentFrame/totalFrame}}</span></p>-->
            <!--<p>parseInt((currentFrame/totalFrame)*400:<span>{{parseInt((currentFrame/totalFrame)*400)}}</span></p>-->
            <!--<p>访问总时长:<span>{{ visitDuration }}/{{duration}}</span></p>-->
            <!--<p>剩余时长:<span>{{ currentTimeFormate }}/{{currentTime}}</span></p>-->
            <p>{{$t('public.consumer')}}: <span> {{ currCustomerName }}</span></p>
            <p>{{$t('webchat.trackDuration')}}:<span>{{ visitDuration }}</span></p>
          </el-col>
          <el-col :span="12">
<!--        <el-button-group class="btn-group" role="group">
              <el-button type="button" class="btn btn-default" :disabled="prevButtonDisabled" v-on:click="prevBtnOnClick">
                <<
              </el-button>
              <el-button type="button" class="btn btn-default" v-on:click="playBtnOnClick">
                ||
              </el-button>
              <el-button type="button" class="btn btn-default" :disabled="nextButtonDisabled" v-on:click="nextBtnOnClick">
                >>
              </el-button>
            </el-button-group>-->
            <div class="control">
              <span class="btn btn-prev" :class="{disable: prevButtonDisabled}" @click="prevBtnOnClick"><i class="iconfont icon-houtui"></i></span>
              <span class="btn btn-next" :class="{disable: nextButtonDisabled}" @click="nextBtnOnClick"><i class="iconfont icon-qianjin"></i></span>
              <span class="btn btn-play" @click="playBtnOnClick"><i class="iconfont" :class="playButtonStyle"></i></span>
            </div>
            <div class="progress-box">
              <div id="trackprogressBar"></div>
              <div class="progress-group">
                <!--<div class="progress-item" :data-n="n" :class="{passProgress: (currentFrame/totalFrame)*400 >= n}" v-for="n in 400"></div>-->
                <!--<div class="progress-item" :data-n="n" :class="{passProgress: (playTime/duration)*400 >= n}" v-for="n in 400"></div>-->
                <div class="progress-item" :data-n="n" :class="classObject(n)" v-for="(n, index) in 400"></div>
              </div>
              <!--<input class="player-progress" type="range"  min="0" :max="totalFrame" @input="progressBarDragged" v-model="currentFrame"/>-->
              <input class="player-progress" type="range"  min="0" :max="duration" @input="progressBarDragged" v-model="playTime"/>
              <span>{{$t('public.residue')}} {{currentTimeFormate}}</span>
              <div class="current-info">{{$t('webchat.currentPlayer')}}: <span>{{currentUrl.length > 50 ? currentUrl.substring(0, 50) + '...' : currentUrl}}</span></div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="select-box">
              <p>{{$t('webchat.webPage')}}<a :href="currentUrl" target="_blank">{{currentUrl.length > 50 ? currentUrl.substring(0, 50) + '...' : currentUrl}}</a></p>
              <el-select class="page-select" v-model="currentPage" placeholder="请选择" size="mini" @change="movieChooesBtnOnClick()">
                <el-option
                  v-for="(item, index) in movieList"
                  :key="item._id"
                  :label="(index + 1) + ': ' + item.url"
                  :value="index">
                </el-option>
              </el-select>
              <div class="selected-page" @click="showSelectDrop">
                {{$t('webchat.currentPage', { currentPage: currentPage + 1, movieList: movieList.length || 1})}}
              </div>
              <!--<el-button-group class="btn-group" role="group">
                <el-button @click="speedBtnOnClick(1)">
                  1x
                </el-button>
                <el-button @click="speedBtnOnClick(2)">
                  2x
                </el-button>
                <el-button @click="speedBtnOnClick(8)">
                  8x
                </el-button>
              </el-button-group>
              <el-button @click="autoPlayBtnOnClick(!autoPlayMode)">
                <span v-show="autoPlayMode">取消自动</span>
                <span v-show="!autoPlayMode">自动播放</span>
              </el-button>
              <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  {{ currentMovieId }} <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <template v-for="(item, index) in $store.state.session.movies">
                    <li><a @click="movieChooesBtnOnClick(index)" >page {{ index + 1 }}</a></li>
                  </template>
                </ul>
              </div>
              <el-button-group>
                <el-button @click="mousemoveHeatmapBtnOnClick" :disabled="!(heatmap == 0 || heatmap == -1)">
                  视线热力图
                </el-button>
                <el-button @click="clickTrackHeatmapBtnOnclick" :disabled="!(heatmap == 1 || heatmap == -1)">
                  点击热力图
                </el-button>
              </el-button-group>-->
            </div>
          </el-col>
        </el-row>
        <br>
<!--    <p v-show="movieList.length === 0">
          当前没有movie可播放
        </p>
        <p v-show="movieList.length > 0">
          当前播放的是第{{ currentPage + 1 }} 个movie, 共{{ movieList.length }}个, 当前播放速率为 {{ $store.state.webchat.trackMovie.speed }}, 当前movie时长为 {{ $store.state.webchat.trackMovie.movie.duration }}ms, 当前连播状态为 {{ autoPlayMode }}
        </p>-->
        <div class="console-bar">
          <i class="iconfont icon-guanbi" @click="closeVideos"></i></span>
        </div>
      </div>
      <div class="track-movie-screen" v-loading="loading">
        <p class="isred" v-show="showNotice">重要通知：【用户行为轨迹回放视频功能】不久后将商用化，目前阶段您还可以继续使用，但平台将对每天的录制次数做限制，每天最多录制100个pv的轨迹，超过100后将不再进行录制，请知悉！
          该通知从2018年6月26号23点开始生效，如有任何问题，请联系售后客服。
          <i class="el-icon-close closeNotice" @click="closeNotice"></i>
        </p>
        <div id="mousemovemap" v-show="heatmap == 0"></div>
        <div id="clickmap" v-show="heatmap == 1"></div>
        <div class="track-mask"></div>
        <div id="player-iframe"></div>
      </div>
    </div>
</template>
<script>
  import { millsToDate } from '@/utils/m7Utils'
  import { Movie, Player } from './recorder'
  import h337 from 'heatmap.js'
  import _ from 'lodash'
  import { mapState } from 'vuex'
  const playButtonPlayStyle = 'icon-huifu'
  const playButtonPauseStype = 'icon-zanting'
  let player
//  let couldPlayWhenProgressBarDragged = 0
  const service = {
    resetSize () { // 当窗口大小变化时 重置 当前播放区域的缩放比
      if (document.getElementsByClassName('track-movie-screen')[0]) {
        let screenHeight = document.getElementsByClassName('track-movie-screen')[0].offsetHeight // 获取播放区域的高度
        let screenScale = screenHeight / 886
        console.log(screenScale)
//        document.getElementById('player-iframe').style.transform = `scale(${screenScale})`
      }
    },
    getMousemoveMap (movieId) { // 获取鼠标移动热力图
      setTimeout(() => {
        let heatmap = h337.create({
          container: document.getElementById('mousemovemap'),
          maxOpacity: 0.6,
          radius: 50,
          blur: 0.90
        })
        this.frames.forEach(frame => {
          if (frame.eventType !== 'mutation') {
            heatmap.addData({
              x: frame.cursorX,
              y: frame.cursorY,
              value: 1
            })
          }
        })
      }, 500)
    },
    getClickMap () { // 获取鼠标点击热力图
      setTimeout(() => {
        let heatmap = h337.create({
          container: document.getElementById('clickmap'),
          maxOpacity: 0.6,
          radius: 50,
          blur: 0.90
        })
        this.frames.forEach((frame) => {
          if (frame.eventType === 'click') {
            heatmap.addData({
              x: frame.cursorX,
              y: frame.cursorY,
              value: 1
            })
          }
        })
      }, 500)
    },
    clearOldMovie () {
    },
    initPlayer (movieData, frames, config) { // 对播放器进行初始化
      let self = this
      player = null
      player = new Player({
        target: document.getElementById('player-iframe')
      })
      const movie = new Movie({
        top: 0,
        left: 0,
        scrollX: 0,
        scrollY: 0,
        rootId: movieData.rootId,
        children: JSON.parse(this.children),
        frames: frames,
        base: movieData.base
      })
      player.initPlayer(movie)
      player.on('stop', () => {
        this.$store.dispatch('stopMovie')
        this.autoPlayMovie()
      })
      config.movie.duration = movie.duration
      this.configPlayer(config)
      this.currentFrame = 0
      this.totalFrame = frames.length === 0 ? frames.length : frames.length - 1
      player.on('progress', data => {
        self.currentFrame = data.progress
      })
      if (this.autoPlayMode) {
        this.startMovie()
      }
    },
    configPlayer (config) {
      player.setSpeed(config.speed)
      this.configMovie(config.movie)
    },
    configMovie (config) {
      this.$store.dispatch('updateCurrentMovie', {
        index: config.index,
        duration: config.duration
      })
    },
    startMovie () {
      if (!player.isPlaying) {
        const frames = this.$store.state.webchat.trackMovie.framesList
        if (!frames) {
          this.$message({
            message: this.$t('webchat.MovieDataUnloading'),
            type: 'warning'
          })
          return
        }
        this.$store.dispatch('startMovie')
        if (player.currentFrame) {
          player.continue()
        } else {
          player.play()
        }
      }
    },
    pauseMovie () {
      if (player.isPlaying) player.pause()
      if (this.$store.state.webchat.trackMovie.isPlaying) this.$store.dispatch('stopMovie')
    },
    stopMovie () {
      if (player && player.isPlaying) player.stop()
      if (this.$store.state.webchat.trackMovie.isPlaying) this.$store.dispatch('stopMovie')
    },
    resetCurrentFrame (frameIndex) {
      if (player.isPlaying) this.pauseMovie()
      this.couldPlayWhenProgressBarDragged++
      let self = this

//      if (self.couldPlayWhenProgressBarDragged <= 1) {
//        player.resetCurrentFrame(player.movie.frames[frameIndex])
//        self.startMovie()
//      }
//      self.couldPlayWhenProgressBarDragged--
      setTimeout(() => {
        if (self.couldPlayWhenProgressBarDragged <= 1) {
          player.resetCurrentFrame(player.movie.frames[frameIndex])
          self.startMovie()
        }
        self.couldPlayWhenProgressBarDragged--
      }, 1000)
    },
    updateSpeed (speed) {
      this.$store.dispatch('updatePlaySpeed', speed)
      player.setSpeed(speed)
    },
    updateContinuousPlayMode (mode) {
      this.autoPlayMode = mode
      if (mode && !this.$store.state.webchat.trackMovie.isPlaying && !player.isPlaying) {
        this.startMovie()
      }
    },
    autoPlayMovie () {
      if (this.currentFrame === this.totalFrame && this.autoPlayMode && this.$store.state.webchat.trackMovie.movie.index < this.$store.state.webchat.trackMovie.movieList.length - 1) {
        setTimeout(() => {
          this.nextBtnOnClick()
        }, 500)
      }
    }
  }
  export default {
    name: 'trackVideo',
    data () {
      return {
        movieList: [], // 行为回放数据的列表
        children: [], // 一些dom的节点
        now: 0,
        showNotice: true, // 展示通知信息
        currentFrame: 0, // 当前播放帧的索引
        totalFrame: 0, // 总播放帧数
        autoPlayMode: true, // 自动播放按钮
        frames: [], // 存放所有帧的list
        tabType: '',
        sessionId: '',
        heatmap: -1,
        loading: false,
        currentTime: '',  // 当前播放的时间
        playTime: 0,         // 已经播放的时长
        currentTimeFormate: '',
        currentUrl: '', // 当前播放的视频的url地址
        userBehaviorVideoId: '',  // 用户行为回放的id
        currentPage: 0,       // 当前播放页
        couldPlayWhenProgressBarDragged: 0,
        currCustomerName: '', // 当前客户名称
        hasVideos: false      // 是否有视频播放
      }
    },
    methods: _.assign({
      getVideos () { // 获取视频
        if (this.tabType === 'webchat_todo') {
          this.userBehaviorVideoId = this.$store.state.webchat.current[this.tabType].currentSession[this.sessionId].userBehaviorVideoId
        } else if (this.tabType === 'webchat_all') {
          this.userBehaviorVideoId = this.$store.state.webchat.current[this.tabType].currentSession.userBehaviorVideoId
        }
//        this.userBehaviorVideoId = '9176edef-73e9-40fe-9325-442805c7b4db'
//        this.userBehaviorVideoId = '95c4ea92-eb96-414c-bf1c-685af81dfb35'
        this.loading = true
        this.$store.dispatch('getClackInfo', {id: this.userBehaviorVideoId, name: 'movies'}).then((res) => {
          if (res && res.length) {
            this.movieList = this.$store.state.webchat.trackMovie.movieList
          } else {
            this.loading = false
            this.$emit('closeVideos', false)
            this.$message({
              message: this.$t('webchat.trackVideoExpired'),
              type: 'warning'
            })
          }
        })
      },
      getChildren (movieId) { // 获取初始化的页面 单个视频的所有的数据都在这里面
        this.$store.dispatch('getChildrenInfo', {id: movieId, name: 'children'}).then((res) => {
          if (res) {
            this.children = res
            this.getFramesByMovieId(movieId)
          }
        })
      },
      getFramesByMovieId (movieId) { // 获取播放视频所需要的帧
        this.playTime = 0
        this.frameCount = this.$store.state.webchat.trackMovie.movieList[this.currentPage].frameCount
        let pageSize = 500 // 总帧数小于5000帧，一次请求500帧数据，大于5000帧一次请求1000帧 数据
        if (this.frameCount > 5000) {
          pageSize = 1000
        }
        this.$store.dispatch('getClackFrameInfo', {id: movieId, name: 'frames', frameCount: this.frameCount, pageSize: pageSize}).then((res) => {
          if (res && res.length) {
            const frameData = res
            let frames = []
            frameData.forEach((data) => {
              frames.push(JSON.parse(data))
            })
            this.frames = frames
            this.loading = false
            this.resetSize()
            this.renderProgress() // 渲染进度条上面的颜色 橘黄色代表有事件 灰色代表没有做操作 灰色区域会快速划过去
            /*
             for (let i = 0; i < 400; i++) {
               document.getElementsByClassName('progress-item')[i].style.background = '#ff9100'
               let Time = (self.frames[self.frames.length - 1].ts - self.frames[0].ts) * i / 400
               self.frames.forEach((item, index) => {
                 if (self.frames[index + 1]) {
                   if (self.frames[index + 1].ts - self.frames[index].ts >= 1000) {
                     if (self.frames[index].ts - self.frames[0].ts <= parseInt(Time) && self.frames[index + 1].ts - self.frames[0].ts >= parseInt(Time)) {
                       document.getElementsByClassName('progress-item')[i].style.background = '#ccc'
                       return
                     }
                   }
                 }
               })
             }
             */
          } else {
            this.$message.error(this.$t('webchat.notrackVideo'))
            this.currentTimeFormate = '00:00:00'
            this.playTime = 0
            this.duration = 0
            this.hasVideos = false
            document.getElementById('player-iframe').innerHTML = ''
            this.nextBtnOnClick()
          }
        })
      },
      renderProgress () { // 处理进度条给空白帧和有视频的帧用不同的颜色展示
        let self = this
        let startTime = new Date().getTime()
        let trackprogressBar = document.getElementById('trackprogressBar')
        let flagWidth = 0
        trackprogressBar.innerHTML = ''
        self.frames.forEach((item, index, frames) => {
          if (frames[index + 1]) {
            let div = document.createElement('div')
            if (frames[index + 1].ts - item.ts >= 2000) {
              div.setAttribute('class', 'blank')
              div.style.width = ((frames[index + 1].ts - item.ts) / (frames[frames.length - 1].ts - frames[0].ts)) * 1000 + 'px'
              flagWidth += ((frames[index + 1].ts - item.ts) / (frames[frames.length - 1].ts - frames[0].ts)) * 1000
              trackprogressBar.appendChild(div)
            } else {
              div.setAttribute('class', 'origin')
              div.style.width = ((frames[index + 1].ts - item.ts) / (frames[frames.length - 1].ts - frames[0].ts)) * 1000 + 'px'
              flagWidth += ((frames[index + 1].ts - item.ts) / (frames[frames.length - 1].ts - frames[0].ts)) * 1000
              trackprogressBar.appendChild(div)
            }
          }
        })
        trackprogressBar.style.width = flagWidth + 'px'
        let scaleSize = 400 / parseInt(trackprogressBar.clientWidth)
        trackprogressBar.style.transform = `scalex(${scaleSize})`
        this.hasVideos = true
        let endTime = new Date().getTime()
        console.log(endTime - startTime)
      },
      closeVideos () {
        this.stopMovie()
        this.$store.dispatch('clearTrackVideoStore')
        this.$emit('closeVideos', false)
      },
      playBtnOnClick () {
        if (this.$store.state.webchat.trackMovie.isPlaying) {
          this.pauseMovie()
        } else if (this.hasVideos) {
          this.startMovie()
        }
      },
      resetCurrentFrameOnClick () {
        const progress = 0.01
        const newFrame = player.getFrameByProgress(progress)
        player.resetCurrentFrame(newFrame)
        this.$store.dispatch('startMovie')
      },
      prevBtnOnClick () {
        if (!this.prevButtonDisabled) {
          this.stopMovie()
          const currentIndex = this.$store.state.webchat.trackMovie.movie.index
          this.currentPage = currentIndex - 1
          this.movieChooesBtnOnClick()
        }
      },
      nextBtnOnClick () {
        if (!this.nextButtonDisabled) {
          this.stopMovie()
          const currentIndex = this.$store.state.webchat.trackMovie.movie.index
          this.currentPage = currentIndex + 1
          this.movieChooesBtnOnClick()
        }
      },
      speedBtnOnClick (speed) {
        this.updateSpeed(speed)
      },
      progressBarDragged () {
        let playTime = this.playTime
//        this.resetCurrentFrame(this.currentFrame)
        this.pauseMovie()
        let self = this
        setTimeout(() => {
          self.frames.forEach((item, index) => {
            if (self.frames[index].ts - self.frames[0].ts <= parseInt(playTime) && self.frames[index + 1] && self.frames[index + 1].ts - self.frames[0].ts >= parseInt(playTime)) {
              self.resetCurrentFrame(index)
              return
//            self.currentFrame = index
            }
          })
        }, 500)
      },
      autoPlayBtnOnClick (mode) {
        this.updateContinuousPlayMode(mode)
      },
      movieChooesBtnOnClick () {
        this.stopMovie()
        this.couldPlayWhenProgressBarDragged = 0
        const currentIndex = this.currentPage
        this.configMovie({
          index: currentIndex,
          duration: 0
        })
        this.currentUrl = this.$store.state.webchat.trackMovie.movieList[currentIndex].url || ''
        const movieId = this.$store.state.webchat.trackMovie.movieList[currentIndex]._id
        this.getChildren(movieId)
      },
      showSelectDrop () {
        document.querySelector('.page-select .el-input__suffix-inner').click()
      },
      mousemoveHeatmapBtnOnClick () {
        if (this.heatmap === -1) {
          this.heatmap = 0
          const currentMovieIndex = this.$store.state.webchat.trackMovie.movie.index
          const movie = this.$store.state.webchat.trackMovie.movieList[currentMovieIndex]
          this.getMousemoveMap(movie._id)
        } else {
          this.heatmap = -1
//          $('#mousemovemap').empty()
          document.getElementById('mousemovemap').innerHTML = ''
        }
      },
      clickTrackHeatmapBtnOnclick () {
        if (this.heatmap === -1) {
          this.heatmap = 1
          const currentMovieIndex = this.$store.state.webchat.trackMovie.movie.index
          const movie = this.$store.state.webchat.trackMovie.movieList[currentMovieIndex]
          this.getClickMap(movie._id)
        } else {
          this.heatmap = -1
          document.getElementById('clickmap').innerHTML = ''
//          $('#clickmap').empty()
        }
      },
      classObject (n) {
        return {
          passProgress: (this.playTime / this.duration) * 400 >= n,
          noPassProgress: (this.playTime / this.duration) * 400 < n
        }
      },
      closeNotice () {
        this.showNotice = false
      }
    }, service),
    watch: {
      '$store.state.webchat.trackMovie.movieList' (val) { // 监听播放数据的列表的变化
        if (Array.isArray(val) && val.length) {
          const currentMovieIndex = this.$store.state.webchat.trackMovie.movie.index // 当前播放行为回放的索引
          const movieId = val[currentMovieIndex]._id
          this.getChildren(movieId)
        } else {
          console.error('movie为空')
        }
      },
      '$store.state.webchat.trackMovie.movie.duration' (val) {
//        this.duration = val
      },
      'frames' (val, oldVal) {
        if (Array.isArray(val)) {
          if (val.length === 0) console.error('frames为空')
          const currentMovieIndex = this.$store.state.webchat.trackMovie.movie.index
          const movieData = this.$store.state.webchat.trackMovie.movieList[currentMovieIndex]
          let config = {
            speed: this.$store.state.webchat.trackMovie.speed,
            movie: {
              index: this.$store.state.webchat.trackMovie.movie.index,
              duration: this.$store.state.webchat.trackMovie.movie.duration
            }
          }
          this.initPlayer(movieData, val, config)
        }
      },
      'movieList' (val) {
        this.currentUrl = val[this.currentPage].url || ''
      },
      'currentFrame' () {
        if (this.currentFrame || this.currentFrame === 0) {
          if (this.currentFrame === this.totalFrame) {
            this.currentTime = 0
          } else if (player.movie.frames && player.currentFrame) {
            this.currentTime = player.movie.frames[this.totalFrame].ts - player.currentFrame.ts
          } else {
            this.currentTime = 0
          }
          this.playTime = this.duration - this.currentTime
        } else {
          this.currentTime = player.movie.frames[this.totalFrame] ? player.movie.frames[this.totalFrame].ts : 0
          this.playTime = 0
        }
        this.currentTimeFormate = millsToDate(this.currentTime)
      }
    },
    mounted: function () {
      let self = this
      let arr = this.$route.path.split('/')
      let tabType = arr[3]
      let _id = arr[4]
      this.tabType = tabType
      this.sessionId = _id
      this.currCustomerName = this.$store.state.webchat.current[this.tabType].currentCustomer.name || this.$t('customer.customerSlot.unlocation')
      this.getVideos()
      this.configMovie({
        index: this.currentPage,
        duration: 0
      })
      window.onresize = function () {
        self.resetSize()
      }
    },
    computed: {
//      passProgress: parseInt((this.currentFrame / this.totalFrame) * 400),
//      userBehaviorVideoId () {
//        return this.$store.state.webchat.current[this.tabType].currentSession[this.sessionId].userBehaviorVideoId || {}
//      },
      duration () {
        return this.$store.state.webchat.trackMovie.movie.duration
      },
      ...mapState({
        playButtonStyle: state => state.webchat.trackMovie.isPlaying ? playButtonPauseStype : playButtonPlayStyle,
        prevButtonDisabled: state => state.webchat.trackMovie.movie.index === 0,
        nextButtonDisabled: state => {
          if (!state.webchat.trackMovie.movieList.length) {
            return true
          } else {
            return state.webchat.trackMovie.movie.index === state.webchat.trackMovie.movieList.length - 1
          }
        },
        currentMovieId: state => state.webchat.trackMovie.movieList.length > 0 ? `page ${state.webchat.trackMovie.movie.index + 1}` : '暂无movie',
        visitDuration: state => {
          return millsToDate(state.webchat.trackMovie.movie.duration)
        }
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  @import "./style.styl"
  .icon-guanbi
    cursor pointer
  .isred
    color $c-pink
    position: absolute
    z-index: 10000
    font-size: 14px
    background-color: RGBA(255, 255, 255, 0.75)
    padding: 5px 30px 5px 5px
    box-sizing: border-box
    width: 100%
  .closeNotice
    font-size: 16px
    cursor: pointer
    color: #000
    position: absolute
    top 5px
    right: 10px
  .container
    background: $c-bus-back
    width: 100%
    z-index: 2001
    height: calc(100% - 150px)
    position: fixed
    top: 0
    left: 0
    border-bottom: 1px solid #ddd
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.12), 0px 0px 6px 0px rgba(0,0,0,0.04);
</style>
